<!-- child2组件 -->
<template>
  <div id="child2">
    <p>{{ userInfo.name }}</p>
    <button @click="changeUserInfo('李四')">修改姓名</button>
  </div>
</template>

<script>
// 引入bus vue空实例对象，兄弟间通信
import bus from '@/utils/bus'
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
      },
    }
  },
  methods: {
    // 点击修改姓名时调用
    changeUserInfo(newName) {
      this.userInfo.name = newName
      // 调用bus vue空实例对象中的child1创建的changeName方法
      // 并把用户新的名字使用参数传递
      bus.$emit('changeName', newName)
    },
  },
}
</script>

<style lang="scss" scoped></style>
